<template>
  <view class="tcm-container">
    <!-- 顶部banner -->
    <view class="banner">
      <image src="/static/featured/tcm-banner.jpg" mode="aspectFill" />
      <view class="overlay"></view>
      <view class="banner-content">
        <text class="title">中医特色诊疗</text>
        <text class="subtitle">传承千年中医精华，守护您的健康</text>
      </view>
    </view>
    
    <!-- 特色项目 -->
    <view class="section">
      <view class="section-title">
        <text class="main">特色项目</text>
        <text class="sub">Traditional Chinese Medicine</text>
      </view>
      <view class="project-grid">
        <view 
          class="project-item"
          v-for="(item, index) in projects"
          :key="index"
          @tap="viewProject(item)"
        >
          <image :src="item.image" mode="aspectFill" class="bg-image" />
          <view class="content">
            <text class="name">{{ item.name }}</text>
            <text class="desc">{{ item.desc }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 名医团队 -->
    <view class="section">
      <view class="section-title">
        <text class="main">名医团队</text>
        <text class="sub">Expert Team</text>
      </view>
      <scroll-view 
        scroll-x 
        class="doctor-list"
        :show-scrollbar="false"
      >
        <view 
          class="doctor-item"
          v-for="(item, index) in doctors"
          :key="index"
          @tap="viewDoctor(item)"
        >
          <image :src="item.avatar" mode="aspectFill" class="avatar" />
          <text class="name">{{ item.name }}</text>
          <text class="title">{{ item.title }}</text>
          <text class="specialty">{{ item.specialty }}</text>
        </view>
      </scroll-view>
    </view>
    
    <!-- 治疗案例 -->
    <view class="section">
      <view class="section-title">
        <text class="main">治疗案例</text>
        <text class="sub">Success Cases</text>
      </view>
      <view class="case-list">
        <view 
          class="case-item"
          v-for="(item, index) in cases"
          :key="index"
          @tap="viewCase(item)"
        >
          <image :src="item.image" mode="aspectFill" class="case-image" />
          <view class="content">
            <text class="title">{{ item.title }}</text>
            <text class="desc">{{ item.desc }}</text>
            <view class="meta">
              <text class="doctor">主治医师：{{ item.doctor }}</text>
              <text class="date">{{ item.date }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 预约咨询 -->
    <view class="section">
      <view class="section-title">
        <text class="main">预约咨询</text>
        <text class="sub">Appointment</text>
      </view>
      <view class="contact-card">
        <view class="info-item">
          <text class="label">咨询电话</text>
          <text class="value">+853 2837 1333</text>
          <button class="call-btn" @tap="makeCall">拨打</button>
        </view>
        <view class="info-item">
          <text class="label">门诊时间</text>
          <text class="value">周一至周五 9:00-17:00</text>
        </view>
        <view class="info-item">
          <text class="label">门诊地址</text>
          <text class="value">澳门连胜马路镜湖医院中医门诊部</text>
        </view>
      </view>
    </view>
    
    <!-- 底部按钮 -->
    <view class="bottom-bar">
      <button class="action-btn outline" @tap="showConsult">在线咨询</button>
      <button class="action-btn primary" @tap="makeAppointment">立即预约</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 特色项目
const projects = ref([
  {
    id: 1,
    name: '针灸治疗',
    desc: '传统针灸结合现代医学',
    image: '/static/tcm/acupuncture.jpg'
  },
  {
    id: 2,
    name: '推拿理疗',
    desc: '专业推拿缓解疼痛',
    image: '/static/tcm/massage.jpg'
  },
  {
    id: 3,
    name: '中药调理',
    desc: '个性化中药处方',
    image: '/static/tcm/medicine.jpg'
  },
  {
    id: 4,
    name: '艾灸养生',
    desc: '传统艾灸温养调理',
    image: '/static/tcm/moxibustion.jpg'
  }
])

// 名医团队
const doctors = ref([
  {
    id: 1,
    name: '张医生',
    title: '主任医师',
    specialty: '针灸推拿',
    avatar: '/static/doctor/tcm1.jpg'
  },
  {
    id: 2,
    name: '李医生',
    title: '副主任医师',
    specialty: '中药调理',
    avatar: '/static/doctor/tcm2.jpg'
  }
])

// 治疗案例
const cases = ref([
  {
    id: 1,
    title: '颈椎病针灸治疗案例',
    desc: '通过针灸配合推拿，显著改善患者颈椎不适...',
    image: '/static/tcm/case1.jpg',
    doctor: '张医生',
    date: '2024-03-20'
  },
  {
    id: 2,
    title: '失眠中药调理案例',
    desc: '采用中药辨证施治，改善患者睡眠质量...',
    image: '/static/tcm/case2.jpg',
    doctor: '李医生',
    date: '2024-03-18'
  }
])

// 查看项目详情
const viewProject = (project) => {
  uni.navigateTo({
    url: `/pages/featured/project?id=${project.id}`
  })
}

// 查看医生详情
const viewDoctor = (doctor) => {
  uni.navigateTo({
    url: `/pages/doctor/detail?id=${doctor.id}`
  })
}

// 查看案例详情
const viewCase = (case_) => {
  uni.navigateTo({
    url: `/pages/featured/case?id=${case_.id}`
  })
}

// 拨打电话
const makeCall = () => {
  uni.makePhoneCall({
    phoneNumber: '+853 2837 1333'
  })
}

// 在线咨询
const showConsult = () => {
  uni.showModal({
    title: '提示',
    content: '是否开始在线咨询？',
    success: (res) => {
      if (res.confirm) {
        // 这里处理在线咨询逻辑
      }
    }
  })
}

// 立即预约
const makeAppointment = () => {
  uni.navigateTo({
    url: '/pages/appointment/department?type=tcm'
  })
}
</script>

<style lang="scss">
.tcm-container {
  min-height: 100vh;
  background: $bg-color;
  padding-bottom: 120rpx;
  
  .banner {
    position: relative;
    height: 400rpx;
    
    image {
      width: 100%;
      height: 100%;
    }
    
    .overlay {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.6));
    }
    
    .banner-content {
      position: absolute;
      left: 40rpx;
      bottom: 40rpx;
      color: #fff;
      
      .title {
        font-size: 48rpx;
        font-weight: bold;
        margin-bottom: 12rpx;
        display: block;
        text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.2);
      }
      
      .subtitle {
        font-size: 28rpx;
        opacity: 0.9;
        display: block;
        text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.2);
      }
    }
  }
  
  .section {
    padding: 40rpx 30rpx;
    
    .section-title {
      text-align: center;
      margin-bottom: 30rpx;
      
      .main {
        font-size: 36rpx;
        color: $text-primary;
        font-weight: bold;
        margin-bottom: 8rpx;
        display: block;
      }
      
      .sub {
        font-size: 24rpx;
        color: $text-secondary;
        text-transform: uppercase;
        letter-spacing: 2rpx;
      }
    }
  }
  
  .project-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
    
    .project-item {
      position: relative;
      height: 240rpx;
      border-radius: $radius-lg;
      overflow: hidden;
      
      .bg-image {
        width: 100%;
        height: 100%;
      }
      
      .content {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 20rpx;
        background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
        
        .name {
          font-size: 32rpx;
          color: #fff;
          font-weight: bold;
          margin-bottom: 8rpx;
          display: block;
        }
        
        .desc {
          font-size: 24rpx;
          color: rgba(255,255,255,0.9);
        }
      }
      
      &:active {
        transform: scale(0.98);
      }
    }
  }
  
  .doctor-list {
    white-space: nowrap;
    
    .doctor-item {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      width: 200rpx;
      margin-right: 30rpx;
      
      &:last-child {
        margin-right: 0;
      }
      
      .avatar {
        width: 160rpx;
        height: 160rpx;
        border-radius: 50%;
        margin-bottom: 16rpx;
      }
      
      .name {
        font-size: 30rpx;
        color: $text-primary;
        font-weight: bold;
        margin-bottom: 8rpx;
      }
      
      .title {
        font-size: 26rpx;
        color: $text-regular;
        margin-bottom: 8rpx;
      }
      
      .specialty {
        font-size: 24rpx;
        color: $text-secondary;
      }
      
      &:active {
        opacity: 0.8;
      }
    }
  }
  
  .case-list {
    .case-item {
      background: #fff;
      border-radius: $radius-lg;
      margin-bottom: 20rpx;
      overflow: hidden;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .case-image {
        width: 100%;
        height: 300rpx;
      }
      
      .content {
        padding: 20rpx;
        
        .title {
          font-size: 32rpx;
          color: $text-primary;
          font-weight: bold;
          margin-bottom: 12rpx;
          display: block;
        }
        
        .desc {
          font-size: 28rpx;
          color: $text-regular;
          margin-bottom: 16rpx;
          display: block;
        }
        
        .meta {
          display: flex;
          justify-content: space-between;
          font-size: 24rpx;
          color: $text-secondary;
        }
      }
      
      &:active {
        transform: scale(0.99);
      }
    }
  }
  
  .contact-card {
    background: #fff;
    border-radius: $radius-lg;
    padding: 30rpx;
    
    .info-item {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .label {
        width: 140rpx;
        font-size: 28rpx;
        color: $text-regular;
      }
      
      .value {
        flex: 1;
        font-size: 28rpx;
        color: $text-primary;
      }
      
      .call-btn {
        width: 120rpx;
        height: 56rpx;
        line-height: 56rpx;
        font-size: 26rpx;
        color: $primary-color;
        background: $primary-light;
        border-radius: $radius-lg;
        margin-left: 20rpx;
      }
    }
  }
  
  .bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20rpx 30rpx;
    background: #fff;
    box-shadow: $shadow-lg;
    display: flex;
    gap: 20rpx;
    
    .action-btn {
      flex: 1;
      height: 88rpx;
      line-height: 88rpx;
      font-size: 30rpx;
      border-radius: $radius-xl;
      
      &.outline {
        color: $primary-color;
        background: #fff;
        border: 2rpx solid $primary-color;
      }
      
      &.primary {
        color: #fff;
        background: $primary-gradient;
      }
      
      &:active {
        transform: scale(0.98);
      }
    }
  }
}
</style> 